<template>
  <div class="app-content">
    <Tabs value="1">
      <TabPane label="风险信息" name="1">
        <div class="app-form">
          <Form label-position="top">
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="公司名称">
                  <Input v-model.trim="riskModel.enterpriseName" disabled />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="所属区域">
                  <Input v-model.trim="riskModel.areaName" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="项目名称">
                  <Input v-model.trim="riskModel.projectName" disabled />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="工点名称">
                  <Input v-model.trim="riskModel.pointName" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="工点风险等级">
                  <Input v-model.trim="riskModel.pointRiskGradeName" disabled />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="起始时间">
                  <Input v-model.trim="riskModel.startTime" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="结束时间">
                  <Input v-model.trim="riskModel.endTime" disabled />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="是否在施">
                  <Input v-model.trim="riskModel.isWork" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="工点描述">
                  <Input v-model.trim="riskModel.note" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="作业风险名称">
                  <Input v-model.trim="riskModel.riskName" disabled />
                </FormItem>
              </Col>

              <Col span="11">
                <FormItem label="作业风险类别">
                  <Input v-model="riskModel.riskCategoryNames" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="作业风险等级">
                  <Input v-model="riskModel.riskLevelName" disabled />
                </FormItem>
              </Col>

              <Col span="11">
                <FormItem label="分级方法">
                  <Input
                    v-model="riskModel.classificationMethodName"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="具体风险描述">
                  <Input
                    type="textarea"
                    :rows="4"
                    v-model="riskModel.riskDescription"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="工程公司管控要求">
                  <Input
                    type="textarea"
                    :rows="4"
                    v-model="riskModel.riskControlRequirementOne"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="集团公司管控要求">
                  <Input
                    type="textarea"
                    :rows="4"
                    v-model="riskModel.riskControlRequirementTwo"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </TabPane>
      <TabPane label="措施信息" name="2">
        <div class="app-form">
          <Form label-position="top">
            <Row>
              <Col span="24">
                <FormItem label="管控措施">
                  <Input v-model="measureModel.measures" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="管控类型">
                  <Input v-model.trim="measureModel.measureTypeName" disabled />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="频次">
                  <Input v-model.trim="measureModel.frequencyName" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="目前该风险安全控制情况">
                  <Input
                    type="textarea"
                    v-model="measureModel.riskControlDetailOne"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="项目管控责任人">
                  <Input
                    v-model.trim="measureModel.projectManagementDepartmentName"
                    disabled
                  />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="项目部分管领导">
                  <Input
                    v-model.trim="measureModel.projectManagementLeaderName"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="项目部主管领导">
                  <Input
                    v-model.trim="
                      measureModel.leaderInChargeOfProjectDepartmentName
                    "
                    disabled
                  />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="工程公司管理人员">
                  <Input
                    v-model.trim="
                      measureModel.controlDepartmentOfEngineeringCompanyName
                    "
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="工程公司分管领导">
                  <Input
                    v-model.trim="
                      measureModel.leaderInChargeOfEngineeringCompanyName
                    "
                    disabled
                  />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="集团公司管理人员">
                  <Input
                    v-model.trim="
                      measureModel.groupCompanyControlDepartmentName
                    "
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="集团公司分管领导">
                  <Input
                    v-model.trim="measureModel.leaderInChargeOfGroupCompanyName"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </TabPane>
      <TabPane label="落实管控信息" name="3">
        <Timeline>
          <TimelineItem color="blue">
            <Icon type="ios-radio-button-on" slot="dot" />
            <div class="process-container">
              <h4 class="process-title">
                项目部管控信息
              </h4>
              <div
                class="process-list"
                v-for="(item, index) in projects"
                :key="index"
              >
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">{{ projectTitles[index] }}：</div>
                      <div class="row-content">{{ item.personName }}</div>
                    </div>
                  </Col>
                  <Col>
                    <span class="process-date">{{ item.controlTime }}</span>
                  </Col>
                </Row>
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">管控结果：</div>
                      <div class="row-content">
                        {{ item.controlStatusName }}
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">管控说明：</div>
                      <div class="row-content">{{ item.note }}</div>
                    </div>
                  </Col>
                </Row>
                <Row
                  type="flex"
                  justify="space-between"
                  v-if="item.images.length > 0"
                >
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">照片：</div>
                      <div class="row-content">
                        <div
                          class="process-image"
                          v-for="(image, imageIndex) in item.images"
                          :key="imageIndex"
                        >
                          <img :src="image" />
                          <div class="image-cover">
                            <Icon
                              type="ios-eye-outline"
                              @click.native="handleView(image)"
                            ></Icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row
                  type="flex"
                  justify="space-between"
                  v-if="item.attachment.length > 0"
                >
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">附件：</div>
                      <div class="row-content">
                        <div
                          class="process-file"
                          v-for="(file, fileIndex) in item.attachment"
                          :key="fileIndex"
                        >
                          <a :href="file.url">{{ file.fileName }}</a>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
                <div class="process-angle"></div>
              </div>
            </div>
          </TimelineItem>
          <TimelineItem color="blue">
            <Icon type="ios-radio-button-on" slot="dot" />
            <div class="process-container">
              <h4 class="process-title">
                工程公司管控信息
              </h4>
              <div
                class="process-list"
                v-for="(item, index) in companies"
                :key="index"
              >
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">{{ companyTitles[index] }}：</div>
                      <div class="row-content">{{ item.personName }}</div>
                    </div>
                  </Col>
                  <Col>
                    <span class="process-date">{{ item.controlTime }}</span>
                  </Col>
                </Row>
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">管控结果：</div>
                      <div class="row-content">
                        {{ item.controlStatusName }}
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">管控说明：</div>
                      <div class="row-content">{{ item.note }}</div>
                    </div>
                  </Col>
                </Row>
                <Row
                  type="flex"
                  justify="space-between"
                  v-if="item.images.length > 0"
                >
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">照片：</div>
                      <div class="row-content">
                        <div
                          class="process-image"
                          v-for="(image, imageIndex) in item.images"
                          :key="imageIndex"
                        >
                          <img :src="image" />
                          <div class="image-cover">
                            <Icon
                              type="ios-eye-outline"
                              @click.native="handleView(image)"
                            ></Icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row
                  type="flex"
                  justify="space-between"
                  v-if="item.attachment.length > 0"
                >
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">附件：</div>
                      <div class="row-content">
                        <div
                          class="process-file"
                          v-for="(file, fileIndex) in item.attachment"
                          :key="fileIndex"
                        >
                          <a :href="file.url">{{ file.fileName }}</a>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
                <div class="process-angle"></div>
              </div>
            </div>
          </TimelineItem>
          <TimelineItem color="blue">
            <Icon type="ios-radio-button-on" slot="dot" />
            <div class="process-container">
              <h4 class="process-title">
                集团公司管控信息
              </h4>
              <div
                class="process-list"
                v-for="(item, index) in groups"
                :key="index"
              >
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">{{ groupTitles[index] }}：</div>
                      <div class="row-content">{{ item.personName }}</div>
                    </div>
                  </Col>
                  <Col>
                    <span class="process-date">{{ item.controlTime }}</span>
                  </Col>
                </Row>
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">管控结果：</div>
                      <div class="row-content">
                        {{ item.controlStatusName }}
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row type="flex" justify="space-between">
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">管控说明：</div>
                      <div class="row-content">{{ item.note }}</div>
                    </div>
                  </Col>
                </Row>
                <Row
                  type="flex"
                  justify="space-between"
                  v-if="item.images.length > 0"
                >
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">照片：</div>
                      <div class="row-content">
                        <div
                          class="process-image"
                          v-for="(image, imageIndex) in item.images"
                          :key="imageIndex"
                        >
                          <img :src="image" />
                          <div class="image-cover">
                            <Icon
                              type="ios-eye-outline"
                              @click.native="handleView(image)"
                            ></Icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row
                  type="flex"
                  justify="space-between"
                  v-if="item.attachment.length > 0"
                >
                  <Col :span="20">
                    <div class="process-row">
                      <div class="row-label">附件：</div>
                      <div class="row-content">
                        <div
                          class="process-file"
                          v-for="(file, fileIndex) in item.attachment"
                          :key="fileIndex"
                        >
                          <a :href="file.url">{{ file.fileName }}</a>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
                <div class="process-angle"></div>
              </div>
            </div>
          </TimelineItem>
        </Timeline>
      </TabPane>
      <TabPane label="问询回复" name="4">
        <replyInquiries
          :editModel="measureModel"
          :businessType="businessType"
        ></replyInquiries>
      </TabPane>
    </Tabs>
    <Modal title="图片预览" v-model="visible">
      <img
        :src="previewImage"
        v-if="visible"
        style="width: 100%; height: 300px;"
      />
    </Modal>
    <Modal
      v-model="isInquiries"
      title="业务问询"
      width="50%"
      ok-text="提交"
      :footer-hide="true"
    >
      <div class="modal-content">
        <inquiries
          ref="isInquiriesBox"
          :checkedRows="checkedRows"
          :businessType="businessType"
          @modelBox="modelBox"
          @person="person"
        ></inquiries>
      </div>
    </Modal>
    <Modal
      v-model="personModel"
      title="选择人"
      width="80%"
      ok-text="提交"
      :footer-hide="true"
    >
      <div class="modal-content">
        <checkPerson @personBox="personBox"></checkPerson>
      </div>
    </Modal>
    <span class="inquiries" @click="replyChild()">
      {{$route.query.message == true ? '回复' : '问询'}}
    </span>
  </div>
</template>

<script>
import inquiries from '../../../components/modules/inquiries/index'
import checkPerson from '../../../components/modules/inquiries/checkPerson'
import replyInquiries from '../../../components/modules/inquiries/replyInquiries'
export default {
  components: {
    inquiries,
    checkPerson,
    replyInquiries
  },
  name: 'procedure-control-detail',
  props: ['id'],
  data() {
    return {
      checkedRows: [],
      businessType: 'businesstype_control',
      isInquiries: false,
      personModel: false,
      riskModel: {},
      measureModel: {},
      projects: [],
      companies: [],
      groups: [],
      visible: false,
      previewImage: '',
      previewUrl: '',
      projectTitles: ['项目部管控责任人', '项目部分管领导', '项目部主管领导'],
      companyTitles: ['工程公司管理人', '工程公司分管领导'],
      groupTitles: ['集团公司管理人', '集团公司分管领导']
    }
  },
  methods: {
    // 唤醒问询框
    replyChild() {
      if (this.$route.query.message) {
        this.$router.push({
          name: 'replyInquiries-detail',
          query: {
            source: this.$route.query.source,
            businessType: this.$route.query.businessType,
            objectId: this.$route.query.objectId,
            id: this.$route.query.id,
            riskName: this.$route.query.riskName
          }
        })
      } else {
        this.isInquiries = true
        this.$refs.isInquiriesBox.isModel()
      }
    },
    // 关闭问询框
    modelBox() {
      this.isInquiries = false
    },
    // 打开人员选择框
    person() {
      this.personModel = true
    },
    // 关闭人员选择框
    personBox() {
      this.personModel = false
    },
    initRiskData() {
      this.$api.processControl
        .riskDetail(this.id)
        .then(({ code, data, message }) => {
          200 === code
            ? ((this.riskModel = data))
            : this.$Message.error(message)
        })
    },
    initMeasureData() {
      this.$api.processControl
        .measureDetail(this.id)
        .then(({ code, data, message }) => {
          200 === code
            ? (this.measureModel = data,this.checkedRows.push(data))
            : this.$Message.error(message)
        })
    },
    initControlData() {
      this.$api.processControl
        .controlDetail(this.id)
        .then(({ code, data, message }) => {
          if (200 === code) {
            this.projects = data.projectInfo
            this.companies = data.enterpriseInfo
            this.groups = data.companyInfo
            this.handleFiles(this.projects)
            this.handleFiles(this.companies)
            this.handleFiles(this.groups)
          } else {
            this.$Message.error(message)
          }
        })
    },
    handleFiles(data) {
      data.forEach(p => {
        p.images = p.controlPictures
          ? p.controlPictures.split(',').map(i => `${this.previewUrl}${i}`)
          : []
        p.attachment = p.attachment
          ? p.attachment.map(a => {
              return {
                ...a,
                url: `${this.previewUrl}${a.fileId}`
              }
            })
          : []
      })
    },
    handleView(url) {
      this.previewImage = url
      this.visible = true
    },
    init() {
      this.previewUrl = `${process.env.VUE_APP_FILE_SERVER_URL}file/downFile/`
    }
  },
  mounted() {
    this.init()
    this.initRiskData()
    this.initMeasureData()
    this.initControlData()
  }
}
</script>

<style lang="scss" scoped>
.process-list {
  &:not(:last-child) {
    margin-bottom: 15px;
  }
  .ivu-row-flex {
    &:nth-last-child(2) {
      margin-bottom: 0;
    }
  }
  .process-angle {
    top: 15px;
    left: -5px;
  }
  .process-image {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
    .image-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
    &:hover .image-cover {
      display: block;
    }
  }
  .process-file {
    &:not(last-child) {
      margin-bottom: 5px;
    }
  }
  .process-date {
    color: #919191;
  }
}
</style>
